import { type FC, memo } from 'react';
import { Pressable } from 'react-native';

import Animated, {
  withTiming,
  interpolate,
  Extrapolation,
  useSharedValue,
  interpolateColor,
  useAnimatedStyle,
  type SharedValue
} from 'react-native-reanimated';

import { useMemoizedFn } from 'ahooks';
import { sliderStyles } from './styles';

type Props = {
  label: string | number;
  onPress?: () => void;
  animationValue: SharedValue<number>;
}

const SliderItem: FC<Props> = (props) => {
  const { animationValue, label, onPress } = props;

  const translateY = useSharedValue(0);

  const containerStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      animationValue.value,
      [-1, 0, 1],
      [0.5, 1, 0.5],
      Extrapolation.CLAMP
    );
    return { opacity };
  }, [animationValue]);

  const labelStyle = useAnimatedStyle(() => {
    const scale = interpolate(
      animationValue.value,
      [-1, 0, 1],
      [1, 1.25, 1],
      Extrapolation.CLAMP
    );

    const color = interpolateColor(
      animationValue.value,
      [-1, 0, 1],
      ["#b6bbc0", "#002a57", "#b6bbc0"]
    );

    return {
      color,
      transform: [
        { scale },
        { translateY: translateY.value }
      ],
    };
  }, [animationValue, translateY]);

  const onPressIn = useMemoizedFn(() => {
    translateY.value = withTiming(-8, { duration: 250 });
  });

  const onPressOut = useMemoizedFn(() => {
    translateY.value = withTiming(0, { duration: 250 });
  });

  return (
    <Pressable
      onPress={onPress}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
    >
      <Animated.View style={[sliderStyles.item, containerStyle]}>
        <Animated.Text style={[sliderStyles.itemText, labelStyle]}>
          {label}
        </Animated.Text>
      </Animated.View>
    </Pressable>
  );
};

export default memo(SliderItem);